<template>
    <div class="addDialog" id='addDialog'>
        <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
        >
            <el-form-item label="产品编号" prop="productCode">
                <el-input v-model="ruleForm.productCode"></el-input>
            </el-form-item>
            <el-form-item label="订单价格" prop="orderPrice">
                <el-input v-model="ruleForm.orderPrice"></el-input>
            </el-form-item>
            <el-form-item label="订单状态" prop="orderType">
                <el-input v-model="ruleForm.orderType"></el-input>
            </el-form-item>
        </el-form>
        <div class="dialogFooter">
            <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
        </div>
    </div>
</template>
<script>
export default {
    props:{
        addVisible:{
            type: Boolean,
            default: 100
        }
    },
    watch:{
       addVisible(val){
           if(!val){
               this.ruleForm={
                productCode: '',
                orderPrice: '',
                orderType: '',
                createBy: localStorage.getItem('userId')
            }
           }
       } 
    },
    data() {
        return {
            ruleForm: {
                productCode: '',
                orderPrice: '',
                orderType: '',
                createBy: localStorage.getItem('userId')
            },
            rules: {
                productCode: [{ required: true, message: '请输入产品编号', trigger: 'blur' }],
                orderPrice: [{ required: true, message: '请输入订单价格', trigger: 'blur' }],
                orderType: [{ required: true, message: '请输入订单状态', trigger: 'blur' }]
            }
        };
    },
    mounted() {},
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.$emit('orderAdd',this.ruleForm)
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        }
     }
};
</script>
<style  lang="scss">
#addDialog{
    .el-upload--text{
        border:none;
        height:32px;
        width:80px;
    }
}
</style>
<style scoped>
.el-upload--text{
    border:none;
}
.dialogFooter {
    display: flex;
    justify-content: flex-end
}
</style>